<template>
  
  <div>

  <h1>欢迎光临水果店</h1>

 <table class="tb">
    <tr>
        <th>苹果10¥一斤，现打八折</th>
    </tr>
    <tr>
      <td>请输入购买斤数 <input type="number" v-model="x"/> </td>
    </tr>
    <tr>
      <td> <button @click="pay">结账买单</button> </td>
    </tr>
    <tr>
      <td>结账：总价 {{ sum }} ¥ , 折后 {{ activity }} ¥ 优惠 {{ discount }} ¥ </td>
    </tr>
 </table>

  </div>

</template>

<script>
export default {

  data () {
    return {
      x: 0,
      sum: "",
      activity: "",
      discount: ""
    }
  },
  methods: {
    pay(){
      this.sum = this.x * 10
      this.activity = this.x * 10* .8
      this.discount = this.sum - this.activity
    }
  }
}
</script>

<style>

h1{
  text-align: center;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}



.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}



</style>